$u: 1px;
body {
  margin: 0;
}



.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

@each $num in (1, 2, 3, 4, 5, 6, 7, 8) {
  .flex-#{$num} {
    flex: #{$num};
  }
}

// 如果元素自身没有设 .flex-n，同时要防止被兄弟元素的 .flex-n 所挤压，那么可以设下面这个类
.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-column {
  flex-direction: column;
}

// 水平垂直居中
.flex-center {
  align-items: center;
  justify-content: center;
}

// 注意类名没有 flex，是 align-start 而不是 align-flex-start
@each $val in (flex-start, flex-end, center, baseline) {
  .align-#{if(str-index($val, flex), str-slice($val, 6), $val)} {
    align-items: #{$val};
  }
}

// 注意类名没有 flex 和 space
@each $val in (flex-start, flex-end, center, space-between, space-around) {
  .justify-#{if(str-index($val, flex), str-slice($val, 6), if(str-index($val, space), str-slice($val, 7), $val))} {
    justify-content: #{$val};
  }
}




/*
Dimension（尺寸）
*/

@each $num in (5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100) {
  .w-#{$num} {
    width: #{$num + '%'};
  }
}

.max-w-100 {
  max-width: 100%;
}

.h-50 {
  height: 50%;
}

.h-100 {
  height: 100%;
}

.max-h-100 {
  max-height: 100%;
}

.h-auto {
  height: auto !important;
}


.bg-center {
  background-position: center;
  background-repeat: no-repeat;
}

// 背景透明度
@each $alpha in (1,2,3,4,5,6,7,8,9) {
  .bg-translucent-#{$alpha} {
    $alpha: $alpha / 10;
    background-color: rgba(255,255,255,$alpha);
  }
}


// .bg- 常用于裁剪不规则背景图片，根据容器大小生成缩略图，当容器无法设定希望的高度时，可结合 .ar-m-n 类使用
// .object- 常用于裁剪不规则 <img> 图片，根据容器大小生成缩略图，当容器无法设定希望的高度时，建议用背景图片
// 极多数情况下使用 -cover ，极少数情况下使用 -contain
@each $val in (cover, contain) {
  .bg-#{$val} {
    background-size: #{$val};
    background-position: center;
    background-repeat: no-repeat;
  }
  .object-#{$val} {
    object-fit: #{$val};
    width: 100%;
    height: 100%;
  }
}

@each $num in ('000', '333', '666', '808080', '999', 'ccc', 'eee', 'f6f6f6', 'fff') {
  .bg-#{$num} {
    background-color: #{'#' + $num};
  }
}

.bg-mask {
  position: relative;
  &::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    border-radius: inherit;
    background-color: rgba(0,0,0,.5);
  }
}

// List 中的数字是 PC 传统意义上的 8 号字、13 号字、36 号字等等，这么写是为了便于理解
// 所以，请注意乘以 2 的换算，比如如果想设置为传统 36 号字，应写为 font-72
// 为什么不从 8 依次递进到 40？
// 当字体比较大时，如果以 1 为等差递增，容易引起字号不统一，比如前一个页面用 32，制作后一个页面时可能又觉得 30 视觉效果更好，最后规则不统一
@each $num in (8, 9, 10, 11, 12, 13, 14, 15, 16, 18, 20, 24, 28, 32, 36, 40) {
  .font-#{$num} {
    font-size: #{$num * $u};
  }
}

.font-bold {
  font-weight: bold;
}


// 红黄蓝绿等颜色不建议使用red/yellow...这种值，应从互联网上找调配好的色值
// 本库只提供几个最常用色值
@each $num in ('000', '333', '666', '808080', '999', 'ccc', 'eee', 'f6f6f6', 'fff') {
  .color-#{$num} {
    color: #{'#' + $num};
  }
}

// 通常用于将按钮置灰，其中 100 最后生成 1，表示全灰
// 通常用 33 即可，也就是 0.33
@each $num in (33, 50, 67, 100) {
  .gray-#{$num} {
    filter: #{"grayscale(#{$num / 100})"};
  }
}




/**
  内外间距
*/


// 类名范例：.margin-x-0 .margin-x-auto .margin-0 .margin-top-0 等等
// 其中 x 表示横轴，即 left 和 right 的集合，同理 y 表示 y 轴，即 top 和 bottom 的集合
$properties: (margin, padding);
$positions: ('', '-top', '-bottom', '-left', '-right');
$directionMap: (x: (left, right), y: (top, bottom));
$nums: (0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50);
@each $property in $properties {
  @each $directionKey, $directionValue in $directionMap {
    @each $num in $nums {
      .#{$property}-#{$directionKey}-#{$num} {
        #{$property}-#{nth($directionValue, 1)}: #{$num * $u} !important;
        #{$property}-#{nth($directionValue, 2)}: #{$num * $u} !important;
      }
    }
    .#{$property}-#{$directionKey}-auto {
      #{$property}-#{nth($directionValue, 1)}: auto !important;
      #{$property}-#{nth($directionValue, 2)}: auto !important;
    }
  }
  @each $position in $positions {
    @each $num in $nums {
      .#{$property}#{$position}-#{$num} {
        #{$property}#{$position}: #{$num * $u} !important;
      }
    }
    .#{$property}#{$position}-auto {
      #{$property}#{$position}: auto !important;
    }
  }
}

// ar 为 aspect ratio（宽高比）的简写，此代码用于生成某些锁定宽高比的容器
// 通常结合 .bg-cover 类，用于裁剪背景图片，形成缩略图
// 例如 .ar-16-10.bg-cover 会将图片按照 16:10 最大裁剪并缩放到容器大小
$ar: (
    '4-1': 25,
   '20-7': 35,
    '5-2': 40,
    '2-1': 50,
   '16-9': 56.25,
  '16-10': 62.5,
    '4-3': 75,
    '1-1': 100,
);
@each $key, $val in ($ar) {
  .ar-#{$key} {
    padding-bottom: #{$val + '%'};
  }
}






body, page {
  user-select: none;
}

// 由于 body/page 元素设置了全局不可选中文本，因此当允许用户选中文本时，可以给元素加上本 class
.select-text {
  user-select: text;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

// 除让文本禁止换行用法外，还可以阻止 .inline-block 换行，可以形成横向滚动布局
.text-nowrap {
  white-space: nowrap;
}

// 单行文本两端对齐，一般用于让表单左侧的表单名称文字两端对齐
.text-justify {
  text-align: justify;
  text-align-last: justify;
  &::after {
    display: inline-block;
    width: 100%;
    height: 0;
    content: "\0020";
    overflow: hidden;
  }
}

.text-indent {
  text-indent: 2em;
}

// 得到的行高值会是 1.2 、 1.4 这类值
@each $num in (12, 14, 16, 18, 20, 22, 24) {
  .line-height-#{$num} {
    line-height: #{$num / 10};
  } 
}

.no-underline {
  text-decoration: none;
}

.line-through {
  text-decoration: line-through;
}

// 控制文本只显示单行
.one-line {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

// 控制文本只显示 2 行、3 行，注意 lines 是复数形式
@each $key, $val in (two: 2, three: 3) {
  .#{$key}-lines {
    display: -webkit-box;
    -webkit-line-clamp: #{$val};
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

// 给数字自动加人民币符号，不适用于数字有删除线的情况
.text-rmb::before {
  content: "¥ ";
  font-size: 80%;
}